<template>
  <div class="admin">
    <el-card v-loading="pager.loading" class="!border-none" shadow="never">
      <div class="flex justify-between">
        <el-form :inline="true">
          <el-form-item label="会员名称">
            <el-input v-model="queryParams.name" placeholder="请输入会员名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getLists">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleAdd" class="mb-5"  v-perms="['vip-product/update']">
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
      </div>

      <div>
        <el-table :data="pager.lists" size="large">
          <el-table-column label="会员名称" prop="productName" />
          <el-table-column label="实际金额">
            <template #default="{ row }">
              {{ row.promotionPrice || '——' }}
            </template>
          </el-table-column>
          <el-table-column label="原价">
            <template #default="{ row }">
              {{ row.originalPrice || '——' }}
            </template>
          </el-table-column>
          <el-table-column label="首充赠送虚拟币数量">
            <template #default="{ row }">
              {{ row.goldCoin }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)" v-perms="['vip-product/update']">
                编辑
              </el-button>
              <el-button type="danger" link @click="handleDelete(row)"   v-perms="['vip-product/delete']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="handleSuccess"
      @close="showEdit = false"
    />
  </div>
</template>

<script setup name="admin">
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import { getList, deleteProduct } from '@/apis/product';
  import { usePaging } from '@/hooks/usePaging';
  import feedback from '@/utils/feedback';
  import EditPopup from './edit.vue';

  const editRef = ref(null);
  const showEdit = ref(false);

  const queryParams = reactive({
    productType: 1,
    name: '',
  });

  const handleDelete = async row => {
    try {
      feedback.confirm('确定删除吗？').then(async () => {
        await deleteProduct({ id: row.id });
        feedback.msgSuccess('删除成功');
        getLists();
      });
    } catch (error) {
      feedback.error(error.message);
    }
  };

  const handleAdd = async () => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open('add');
  };

  const handleEdit = async row => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open('edit');
    editRef.value?.setFormData(row);
  };

  const handleSuccess = type => {
    getLists();
  };

  const { pager, getLists } = usePaging({
    fetchFun: getList,
    params: queryParams,
  });

  onMounted(() => {
    getLists();
  });
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    outline: none;
  }

  .tab {
    display: flex;
    margin: 16px 0;
    border-bottom: 1px solid #e4e7ed;
  }

  .tab-item {
    padding: 12px 24px;
    cursor: pointer;
    color: #606266;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    font-weight: 500;
  }

  .tab-item:hover {
    color: var(--el-color-primary);
  }

  .tab-item.active {
    color: var(--el-color-primary);
    border-bottom-color: var(--el-color-primary);
  }
</style>
